<template>
  <div class="sysUser">

    <div class="searchArea">
      <span style="font-size: 13px"> 用户名：</span>
      <el-input
          class="nameInput"
          placeholder="请输入用户名"
          v-model="searchParams.username"
          size="small">
      </el-input>

      <span style="font-size: 13px"> 角色：</span>
      <el-select size="small" class="nameInput" v-model="searchParams.roleId">
        <el-option
            v-for="item in rolesList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
        </el-option>
      </el-select>

      <span style="font-size: 13px"> 部门：</span>
      <el-select size="small" class="nameInput" v-model="searchParams.departmentId">
        <el-option
            v-for="item in departmentList"
            :key="item.id"
            :label="item.departName"
            :value="item.id">
        </el-option>

      </el-select>

      <el-button type="primary" size="small" icon="el-icon-search" @click="loadData">搜索</el-button>
      <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="reset">重置</el-button>
    </div>

    <div class="actionArea">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
    </div>

    <div class="dataArea">
      <el-table
          :header-cell-style="{'text-align':'center','height':'49px','color':'black','background-color':'rgb(250,250,250)'}" m
          :cell-style="{'text-align':'center'}"
          border
          size="small"
          @handleSelectionChange="handleSelectionChange"
          :data="sysUserList"
      >

        <el-table-column
            type="selection"
            width="55">
        </el-table-column>

        <el-table-column
            prop="username"
            label="用户名"
        >
        </el-table-column>

        <el-table-column
            prop="createTime"
            label="创建时间"
        >
        </el-table-column>

        <el-table-column
            prop="password"
            label="密码"
        >
          <template slot-scope="scope">
            <span>******</span>
          </template>
        </el-table-column>


        <el-table-column
            prop="phone"
            label="电话"
        >
        </el-table-column>
        <el-table-column
            prop="avatar"
            label="头像"
        >
          <template slot-scope="scope">
            <img style="width: 40px" :src="scope.row.avatar" alt="">
          </template>
        </el-table-column>

        <el-table-column
            prop="birthday"
            label="生日"
        >
        </el-table-column>


        <el-table-column
            prop="sex"
            label="性别"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.sex===1">男</span>
            <span v-else-if="scope.row.sex===2">女</span>
            <span v-else>保密</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="角色"
        >
        </el-table-column>
        <el-table-column
            prop="departmentName"
            label="部门"
        >

        </el-table-column>


        <el-table-column
            prop="status"
            label="状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status===1">正常</span>
            <span v-if="scope.row.status===2">已冻结</span>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" style="margin-right: 10px" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-popconfirm
                title="确定要删除该记录吗？"
                icon="el-icon-delete"
                @onConfirm="confirmDeleteSysUser(scope.row.id)"
            >
              <el-button type="text" slot="reference" style="color: red" size="small">删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
            background
            :current-page="page.pageNo"
            :page-size="page.pageSize"
            :total="page.total"
            hide-on-single-page
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[10,20,30,40]"
            layout=" total,prev, pager, next,sizes, jumper"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog :visible.sync="showAddDialog" title="添加" class="addDialog" :close-on-click-modal="false">
      <el-form :model="addSysUser" ref="addForm" label-position="left" label-width="80px" :rules="rules">


        <el-form-item
            prop="username"
            label="用户名"
        >
          <el-input placeholder="请输入用户名" v-model="addSysUser.username"></el-input>
        </el-form-item>
        <el-form-item
            prop="password"
            label="密码"
        >
          <el-input placeholder="请输入密码" v-model="addSysUser.password"></el-input>
        </el-form-item>

        <el-form-item
            prop="phone"
            label="电话"
        >
          <el-input placeholder="请输入电话" v-model="addSysUser.phone"></el-input>
        </el-form-item>


        <el-form-item
            prop="birthday"
            label="生日"
        >
          <el-date-picker placeholder="请输入生日" value-format="yyyy-MM-dd HH:mm:ss"
                          :close-on-click-modal="false"
                          v-model="addSysUser.birthday"></el-date-picker>
        </el-form-item>


        <el-form-item
            prop="roleId"
            label="角色"
        >
          <el-select v-model="addSysUser.roleId" clearable>
            <el-option
                v-for="item in rolesList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            prop="departmentId"
            label="部门id"
        >
          <el-select size="small" class="nameInput" v-model="addSysUser.departmentId">
            <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.departName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
            prop="sex"
            label="性别"
        >
          <el-radio-group v-model="addSysUser.sex">
            <el-radio :label="1"><i class="el-icon-male">男</i></el-radio>
            <el-radio :label="2"><i class="el-icon-female">女</i></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
            prop="avatar"
            label="头像"
        >
          <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>

        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" size="small" style="border-radius: 0" @click="closeAddDialog">取消</el-button>
        <el-button type="primary" size="small" style="border-radius: 0" @click="confirmAddSysUser">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="showEditDialog" title="修改信息" class="editDialog">
      <el-form :model="editSysUser" ref="editForm" label-position="left" label-width="80px" :rules="rules">

        <el-form-item
            prop="username"
            label="用户名"
        >
          <el-input placeholder="请输入用户名" v-model="editSysUser.username"></el-input>
        </el-form-item>

        <el-form-item
            prop="password"
            label="密码"
        >
          <el-input placeholder="请输入密码" v-model="editSysUser.password"></el-input>
        </el-form-item>

        <el-form-item
            prop="phone"
            label="电话"
        >
          <el-input placeholder="请输入电话" v-model="editSysUser.phone"></el-input>
        </el-form-item>


        <el-form-item
            prop="avatar"
            label="头像"
        >
          <el-upload
              :action="'http://localhost:9999/api'+this.urls.uploadAvatar"
              list-type="picture-card"
              :on-success="handleAvatarSuccess"
              name="file">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">

        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item
            prop="birthday"
            label="生日"
        >
          <el-date-picker placeholder="请输入生日" value-format="yyyy-MM-dd HH:mm:ss" v-model="editSysUser.birthday"></el-date-picker>
        </el-form-item>

        <el-form-item
            prop="sex"
            label="性别"
        >
          <el-radio-group v-model="editSysUser.sex">
            <el-radio :label="1"><i class="el-icon-male">男</i></el-radio>
            <el-radio :label="2"><i class="el-icon-female">女</i></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
            prop="roleId"
            label="角色"
        >
          <el-select v-model="editSysUser.roleId" clearable>
            <el-option
                v-for="item in rolesList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
            prop="departmentName"
            label="部门"
        >
          <el-select size="small" class="nameInput" v-model="editSysUser.departmentId">
            <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.departName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
            prop="status"
            label="状态"
        >
          <el-select v-model="editSysUser.status" clearable>
            <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div style="text-align: right">
        <el-button type="danger" size="small" style="border-radius: 0" @click="closeEditDialog">取消</el-button>
        <el-button type="primary" size="small" style="border-radius: 0" @click="confirmEditSysUser">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getAction, postAction} from "@/utils/http";
import {Message} from "element-ui";

export default {
  name: "sysUser",
  data() {
    return {
      showAddDialog: false,
      showEditDialog: false,
      addSysUser: {
        username: '',
        password: '',
        birthday: ''
      },
      editSysUser: {},
      sysUserList: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      },
      searchParams: {},
      urls: {
        list: "/sysUser/sysUser/list",
        queryList: "/sysUser/sysUser/queryList",
        add: "/sysUser/sysUser/add",
        edit: "/sysUser/sysUser/edit",
        deleteById: "/sysUser/sysUser/deleteById",
        deleteBatch: "/sysUser/sysUser/deleteBatch",
        queryRoles: "/sysRole/sysRole/queryList",
        queryDepartments: "/sysDepartment/sysDepartment/queryList",
        uploadAvatar: "/sys/fileUpload/upload"
      },
      handleRemove(){

      },
      selectedList: [],
      rolesList: [],
      departmentList: [],
      status: [
        {
          label: '正常',
          value: 1
        },
        {
          label: '冻结',
          value: 2
        }
      ]
    }
  },
  created() {
    this.loadData()
    this.selectRoles()
    this.selectDepartments()
  },
  methods: {
    reset() {
      this.searchParams = {}
      this.page.total = 0
      this.page.pageSize = 10
      this.page.pageNo = 1
      this.loadData()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.loadData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.loadData()
    },
    loadData() {
      let params = {
        ...this.page,
        ...this.searchParams
      }
      getAction(this.urls.list, params).then(res => {
        if (res.success) {
          let {records, current, size, total} = res.result
          this.sysUserList = records
          this.page.pageNo = current
          this.page.pageSize = size
          this.page.total = total
        }
      })
    },
    openAddDialog() {
      this.showAddDialog = true
      this.addSysUser = {}
      this.$refs.addForm.resetFields()
    },
    closeAddDialog() {
      this.showAddDialog = false
    },
    openEditDialog(sysUser) {
      this.editSysUser = Object.assign({}, sysUser)
      this.showEditDialog = true
    },
    closeEditDialog() {
      this.showEditDialog = false
      this.$refs.editForm.resetFields()
    },
    handleSelectionChange(val) {
      this.selectedList = val
    },

    confirmAddSysUser() {
      console.log(this.addSysUser)
      this.$refs.addForm.validate(valid => {
        if (valid) {
          postAction(this.urls.add, this.addSysUser).then(res => {
            if (res.success) {
              this.addSysUser = {}
              this.showAddDialog = false
              Message.success("添加成功！");
              this.loadData()
            }
          })
        }
      })

    },
    confirmDeleteSysUser(id) {
      getAction(this.urls.deleteById, {id}).then(res => {
        if (res.success) {
          Message.success("删除成功！");
          this.loadData()
        }
      })
    },
    confirmEditSysUser() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          postAction(this.urls.edit, this.editSysUser).then(res => {
            if (res.success) {
              this.showEditDialog = false
              this.editSysUser = {}
              Message.success("修改成功！")
              this.loadData()
            }

          })
        }
      })
    },
    selectRoles() {
      getAction(this.urls.queryRoles).then(res => {
        if (res.success) {
          this.rolesList = res.result
        }
      })
    },
    selectDepartments() {
      getAction(this.urls.queryDepartments).then(res => {
        if (res.success) {
          this.departmentList = res.result
        }
      })
    },
    handleAvatarSuccess(res,file){
      if (res.success){
        this.editSysUser.avatar = res.result
      }
    }
  }
}
</script>

<style scoped lang="scss">
.sysUser {
  padding: 20px;

  .dataArea {
    margin-top: 20px;

    .page {
      text-align: center;
      margin-top: 20px;
    }
  }

  .actionArea {
    margin-top: 20px;
  }

  .searchArea {
    .nameInput {
      margin-right: 20px;
      width: 180px;
    }
  }

  .editDialog {
    width: 1200px;
    margin: 0 auto;
  }

  .addDialog {
    width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
  }
}
</style>

<style>
.searchArea .el-button {
  border-radius: 0;
}

.actionArea .el-button {
  border-radius: 0;
}

.nameInput input {
  border-radius: 0;
}

.sysUser .editDialog input, .sysUser .addDialog input {
  min-width: 380px;
  border-radius: 0;
}
</style>
